<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="50%"
  >
    <el-row>
      <el-col :span="15">
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          label-width="120px"
        >
          <el-row>
            <el-col :span="14">
              <el-form-item label="壁纸名称" prop="name">
                <el-input
                  v-model="dataForm.name"
                  placeholder="壁纸名称"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-form-item label="壁纸标签" prop="labels">
                <el-input
                  v-model="dataForm.label"
                  placeholder="壁纸标签(回车键确定)"
                  @keyup.enter.native="addLabels()"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="" prop="label">
                <el-tag
                  :key="tag"
                  v-for="tag in dataForm.labels"
                  closable
                  :disable-transitions="false"
                  @close="removeLabels(tag)"
                >
                  {{ tag }}
                </el-tag>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="15">
              <el-form-item label="壁纸分类:" prop="classifyId">
                <el-select
                  v-model="dataForm.classifyId"
                  filterable
                  placeholder="请选择所属分类"
                  size="medium"
                  @change="onSelectClassify"
                >
                  <el-option
                    v-for="item in itemsCatList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="15">
              <el-form-item label="是否上架:" prop="status">
                <el-select
                  v-model="dataForm.status"
                  filterable
                  placeholder="请选择是否上架"
                  size="medium"
                >
                  <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="15">
              <el-form-item label="是否免费:" prop="free">
                <el-select
                  v-model="dataForm.free"
                  filterable
                  placeholder="请选择是否免费"
                  size="medium"
                >
                  <el-option
                    v-for="item in freeList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="15">
              <el-form-item label="是否热门:" prop="hot">
                <el-select
                  v-model="dataForm.hot"
                  filterable
                  placeholder="请选择是否热门"
                  size="medium"
                >
                  <el-option
                    v-for="item in hotList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="15">
              <el-form-item label="是否最新:" prop="newest">
                <el-select
                  v-model="dataForm.newest"
                  filterable
                  placeholder="请选择是否最新"
                  size="medium"
                >
                  <el-option
                    v-for="item in newestList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="15">
              <el-form-item label="上传按钮:" prop="upload">
                <div class="myhead">
                  <el-tooltip content="点击上传锁屏壁纸" placement="top">
                    <el-image
                      style="width: 90px; height: 60px"
                      :src="dataForm.upload"
                      fit="contain"
                      @click="uploadImagesHandle"
                      alt=""
                    />
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="15">
              <el-form-item label="壁纸展示:" prop="images">
                <div
                  class="demo-image"
                  v-for="(item, index) in dataForm.images"
                  :key="index"
                >
                  <el-image
                    style="width: 50px; height: 100px"
                    :src="item"
                    fit="contain"
                    @click="changeactivePic(index, item)"
                  ></el-image>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="9">
        <div style="position: relative;">
          <div class="bg-phone-left">
            <div
              class="block"
              v-for="(item, index) in dataForm.images"
              :key="index"
            >
              <div
                :class="{
                  'tab-left-active': activePic == index,
                  'tab-left': true
                }"
                @click="changeactivePic(index, item)"
              >
                壁纸{{ index }}
              </div>
            </div>
          </div>
          <div class="bg-phone">
            <div class="bg-phone-content">
              <img :src="dataForm.image" style="width:100%;height:auto" />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    <!-- 弹窗, 上传壁纸 -->
    <wallpaper-upload-images
      v-if="uploadImagesVisible"
      ref="wallpaperUploadImages"
      @refreshDataList="refreshUploadImages"
    ></wallpaper-upload-images>
  </el-dialog>
</template>

<script>
import "babel-polyfill";
import WallpaperUploadImages from "./wallpaper-upload-images";
export default {
  data() {
    return {
      // 选择展示层级
      activePic: 0,
      visible: false,
      statusList: [
        {
          value: 1,
          name: "是"
        },
        {
          value: 2,
          name: "否"
        }
      ],
      freeList: [
        {
          value: 1,
          name: "免费"
        },
        {
          value: 2,
          name: "付费"
        }
      ],
      hotList: [
        {
          value: 1,
          name: "是"
        },
        {
          value: 2,
          name: "否"
        }
      ],
      newestList: [
        {
          value: 1,
          name: "是"
        },
        {
          value: 2,
          name: "否"
        }
      ],
      itemsCatList: [],
      uploadImagesVisible: false,
      dataForm: {
        id: 0,
        name: "",
        classifyId: "",
        classifyName: "",
        label: "",
        labels: [],
        free: 1,
        hot: 2,
        newest: 2,
        status: 1,
        images: [],
        upload: "http://file-cdn-theme.cykonhy.com/default/upload_icon.png", //不用上传和提交
        image: "http://file-cdn-theme.cykonhy.com/default/default.jpg" //不用上传和提交
      },
      dataRule: {
        name: [
          { required: true, message: "壁纸名称不能为空", trigger: "blur" }
        ],
        classifyId: [
          { required: true, message: "壁纸分类Id不能为空", trigger: "blur" }
        ],
        images: [{ required: true, message: "壁纸不能为空", trigger: "blur" }],
        labels: [{ required: true, message: "标签不能为空", trigger: "blur" }],
        free: [
          { required: true, message: "是否免费不能为空", trigger: "blur" }
        ],
        hot: [{ required: true, message: "是否热门不能为空", trigger: "blur" }],
        newest: [
          { required: true, message: "是否最新不能为空", trigger: "blur" }
        ],
        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
        upload: [{ required: true, message: "状态不能为空", trigger: "blur" }]
      }
    };
  },
  components: {
    WallpaperUploadImages
  },
  methods: {
    changeactivePic(index, item) {
      this.activePic = index;
      this.dataForm.image = item;
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$http({
        url: this.$http.adornUrl("/wallpaper/wallpaper-classify/list"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 10000
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.itemsCatList = data.page.list;
        }
      });
    },
    // 筛选分类
    onSelectClassify(val) {
      let obj = this.itemsCatList.find(item => {
        return item.id === val;
      });
      this.dataForm.classifyName = obj.name;
    },
    // 上传锁屏壁纸
    uploadImagesHandle() {
      this.uploadImagesVisible = true;
      this.$nextTick(() => {
        this.$refs.wallpaperUploadImages.init();
      });
    },
    refreshUploadImages(images) {
      if (images != null && images.length > 0) {
        this.dataForm.image = images[0];
        this.dataForm.images = images;
      }
      this.uploadImagesVisible = false;
    },
    addLabels() {
      this.dataForm.labels.push(this.dataForm.label);
      this.dataForm.label = "";
    },
    removeLabels(tag) {
      //1、获取元素下标
      let delete_index = this.getArrayIndex(this.dataForm.labels, tag);
      //2、删除指定元素下标；
      let tempLabels = [];
      for (let i = 0, len = this.dataForm.labels.length; i < len; i++) {
        if (i != delete_index) {
          tempLabels.push(this.dataForm.labels[i]);
        }
      }
      this.dataForm.labels = [];
      this.dataForm.labels = tempLabels;
    },
    getArrayIndex(arr, obj) {
      var i = arr.length;
      while (i--) {
        if (arr[i] === obj) {
          return i;
        }
      }
      return -1;
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/wallpaper/wallpaper/${!this.dataForm.id ? "save2" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              name: this.dataForm.name,
              classifyId: this.dataForm.classifyId,
              classifyName: this.dataForm.classifyName,
              images: this.dataForm.images,
              labels: this.dataForm.labels,
              status: this.dataForm.status,
              free: this.dataForm.free,
              hot: this.dataForm.hot,
              newest: this.dataForm.newest
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
<style scoped="scoped">
.text {
  font-size: 12px;
}
.item {
  margin-bottom: -20px;
}
.bg-phone {
  background: url("../../../assets/img/phone.png") no-repeat;
  background-size: 100%;
  width: 300px;
  height: 610px;
  padding: 50px 30px 30px 30px;
}
.bg-phone-content {
  /* background: #fff; */
  height: 560px;
  border-radius: 5px;
}
.bg-phone-left {
  position: absolute;
  left: -38px;
  top: 60px;
}
.tab-left {
  background: #dbdbdd;
  width: 50px;
  height: 30px;
  text-align: center;
  color: #fff;
  border-radius: 30px 0 0 30px;
  margin-bottom: 10px;
  line-height: 30px;
  cursor: pointer;
}
.tab-left-active {
  /* background: #17B3A3 !important;
   */
  background: #5175e6 !important;
}
</style>
